<template>
  <div class="container">
    <el-card>
      <!-- 顶部提示 -->

      <el-row>
        <el-col :span="24" class="top_title"> 试题录入</el-col>
      </el-row>
      <hr class="hr-line" />
      <!-- 顶部提示 end -->
      <!-- 顶部搜索表单 -->
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <!-- 学科 -->

        <el-row>
          <el-col :span="8">
            <el-form-item label="学科:" prop="subjectID">
              <el-select style="width: 100%" v-model="form.subjectID" placeholder="请选择" @change="onSubjectChange">
                <el-option v-for="(item, index) in subjects" :key="index" :label="item.subjectName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 目录 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="目录:" prop="catalogID">
              <el-select style="width: 100%" v-model="form.catalogID" placeholder="请选择">
                <el-option v-for="(item, index) in directory" :key="index" :label="item.directoryName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 企业 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="企业:" prop="enterpriseID">
              <el-select style="width: 100%" v-model="form.enterpriseID" placeholder="请选择">
                <el-option v-for="(item, index) in companyList" :key="index" :label="item.company" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 城市 -->
        <el-row>
          <el-col :span="8">
            <el-form-item class="city-box" label-width="80px" label="城市:" prop="province">
              <el-select class="city-1" placeholder="请选择" v-model="form.province" @change="onProvinceChange">
                <el-option v-for="(item, index) in province" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
              <el-select class="city-2" placeholder="请选择" v-model="form.city">
                <el-option v-for="(item, k, index) in citys" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 方向 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="方向:" prop="direction">
              <el-select style="width: 100%" placeholder="请选择" v-model="form.direction">
                <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 题型 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="题型:">
              <el-radio v-model="form.questionType" :label="1">单选</el-radio>
              <el-radio v-model="form.questionType" :label="2">多选</el-radio>
              <el-radio v-model="form.questionType" :label="3">简答</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 难度 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="难度:">
              <el-radio v-model="form.difficulty" :label="1">简单</el-radio>
              <el-radio v-model="form.difficulty" :label="2">一般</el-radio>
              <el-radio v-model="form.difficulty" :label="3">困难</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 富文本编辑器 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="题干:" prop="question">
              <!-- 使用 v-model 进行双向的数据绑定 -->
              <quill-editor v-model="form.question"></quill-editor>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 单选 -->
        <template v-if="form.questionType === 1">
          <div>
            <el-row>
              <el-col>
                <el-form-item label="选项：">
                  <el-form-item label-width="10px" v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key" :prop="'domains.' + index + '.value'">
                    <el-row>
                      <el-col :span="1">
                        <el-radio class="distance" :label="1" v-model="form.options">
                          {{ dynamicValidateForm.arr[index] }}
                        </el-radio>
                      </el-col>
                      <el-col :span="5">
                        <el-input class="distances" v-model="form.TXT"></el-input>
                      </el-col>
                      <el-col :span="10">
                        <el-upload class="upload-demo" action="#" multiple :limit="3">
                          <el-button class="upload_btn">点击上传</el-button>
                        </el-upload>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col>
              <el-button class="add_btn" type="danger" size="small" @click="addDomain">+增加选项与答案</el-button>
            </el-col>
          </el-row>
        </template>

        <!-- 多选 -->

        <template v-if="form.questionType === 2">
          <div>
            <el-row>
              <el-col>
                <el-form-item label="选项：">
                  <el-form-item label-width="10px" v-for="(domain, index) in ddynamicValidateForm.domains" :key="domain.key" :prop="'domains.' + index + '.value'">
                    <el-row>
                      <el-col :span="1">
                        <el-checkbox class="distances">{{ ddynamicValidateForm.arr[index] }}</el-checkbox>
                      </el-col>
                      <el-col :span="5">
                        <el-input class="distances" v-model="form.TXTtxtt"></el-input>
                      </el-col>

                      <el-col :span="10">
                        <el-upload class="upload-demo" action="#" multiple :limit="3">
                          <el-button class="upload_btn">点击上传</el-button>
                        </el-upload>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col>
              <el-button class="add_btn" type="danger" size="small" @click="aaddDomain">+增加选项与答案</el-button>
            </el-col>
          </el-row>
        </template>

        <!-- 解析视频 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="解析视频:">
              <el-input v-model="form.videoURL" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 答案解析 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="答案解析:">
              <!-- 使用 v-model 进行双向的数据绑定 -->
              <quill-editor ref="myTextEditor" v-model="form.answer"></quill-editor>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 文本域输入框 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="题目备注:">
              <el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="form.remarks"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 试题标签 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="90px" label="试题标签：">
              <el-select class="hahahaha" v-model="form.tags" multiple filterable allow-create default-first-option placeholder="请选择" style="width: 102%">
                <el-option v-for="item in tagList" :key="item.tagName" :label="item.tagName" :value="item.tagName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 确认提交 -->
        <el-form-item label-width="80px" label="">
          <el-button :type="$route.query.id ? 'success ' : 'primary'" @click="onClick">{{
            $route.query.id ? '确认修改' : '确认提交'
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 学科接口
import { list } from '@/api/hmmm/subjects'
// 目录接口
import { list as directorylist } from '@/api/hmmm/directorys'
// 企业接口
import { list as companyListlist } from '@/api/hmmm/companys'
// 导入城市和区域/县
import { provinces, citys } from '@/api/hmmm/citys'
import { list as TagList } from '@/api/hmmm/tags'
export default {
  data () {
    return {
      dynamicValidateForm: {
        domains: [{
          value: ''
        }, {
          value: ''
        }, {
          value: ''
        }, {
          value: ''
        }],
        email: '',
        arr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', ' L', 'M']
      },
      ddynamicValidateForm: {
        domains: [{
          value: ''
        }, {
          value: ''
        }, {
          value: ''
        }, {
          value: ''
        }],
        email: '',
        arr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', ' L', 'M']
      },
      // 标签列表
      tagList: [],
      // 复选
      checkList: [],
      // 单选
      radio: [],
      // 学科列表
      subjects: [],
      // 二级目录列表
      directory: [],
      // 企业列表
      companyList: [],
      // 区域列表
      citys: [],
      // 城市列表
      province: provinces(),
      // 方向
      direction: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],
      // 试题类型
      questionType: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 难度
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        direction: '', // 方向
        questionType: 1, // 题型
        difficulty: 1, // 难度
        question: '', // 题干
        // 选项
        options: [],
        // 选项说明
        // TXT: [],
        videoURL: ' ', // 解析视频
        answer: '', // 答案解析
        remarks: '', //   题目备注
        tags: [] // 试题标签
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录' }],
        enterpriseID: [{ required: true, message: '请选择企业' }],
        province: [{ required: true, message: '请选择地区' }],
        direction: [{ required: true, message: '请选择方向' }],
        question: [{ required: true, message: '请输入题干' }],
        answer: [{ required: true, message: '请输入答案解析' }],
        videoURL: [{ required: true, message: '请输入解析视频地址' }]
      }
    }
  },
  created () {
    // 获取学科列表
    this.getQuestionsList()
    this.getCompanyList()
  },
  methods: {
    aaddDomain () {
      this.ddynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
    },
    addDomain () {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
    },
    // 点击提交

    onClick () {
      this.$refs.form.validate((valid) => {

      })
    },
    //  获取学科列表
    async getQuestionsList () {
      try {
        const { data: res } = await list({ page: 1, pagesize: 10 })
        console.log('学科列表', res)
        this.subjects = res.items
      } catch (error) { }
    },
    // async gethahaha () {
    //   try {
    //     const { data } = await directorylist({ subjectID: this.form.subjectID })
    //     console.log(data)
    //     this.directory = data.items
    //   } catch (error) {

    //   }
    // },

    //  学科选择框发生变化后触发的函数
    async onSubjectChange () {
      this.form.tags = null
      this.form.catalogID = null
      const { data: res } = await directorylist({ subjectID: this.form.subjectID })
      console.log('目录列表', res)
      this.directory = res.items
    },
    //  当市级发生变化时触发的函数
    onProvinceChange (val) {
      this.form.city = ''
      this.citys = citys(val)
    },
    // 获取企业列表
    async getCompanyList () {
      const { data: res } = await companyListlist({
        page: 1,
        pagesize: 50
      })
      console.log('企业列表', res)
      this.companyList = res.items
    },
    // 获取标签列表
    async getTagList () {
      const { data: res } = await TagList({
        subjectID: this.form.subjectID
      })
      if (res.items.length) {
        this.tagList = res.items
      } else {
        this.tagList = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item__label {
  width: 200px !important;
}
.hr-line {
  color: #ebeef5;
}
.top_title {
  margin: 20px 0px 20px 0px;
}
.el-card {
  .hahahaha {
    margin-left: -10px;
  }
  .distance {
    margin-bottom: 50px;
  }
  .distances {
    margin-bottom: 45px;
  }
  .upload-demo {
    margin-left: 20px;
    .upload_btn {
      margin-top: -10px;
      height: 50px;
      margin-bottom: 40px;
    }
  }
  .add_btn {
    margin: 10px 0px 20px;
    margin-left: 80px;
  }
  .el-form {
    margin-top: 30px;
  }
  .city-1 {
    width: 48%;
    margin-right: 4%;
  }
  .city-2 {
    width: 48%;
  }
  margin: 10px;
  padding-bottom: 200px;
  .quill-editor {
    margin-bottom: 60px;
    height: 200px;
  }
}
</style>
